<template>
  <div class="home">
    <div class="index">
      <el-row class="index1">
        <el-col :span="widthNum1" class="index-left">
          <div class="grid-content bg-purple index-left1">
            <div class="index-logo">
              <img src alt="logo" />
            </div>
            <el-radio-group v-model="isCollapse">
              <div class="hide" @click="HideShow">
                <i :class="ico" :title="hideHint"></i>
              </div>
            </el-radio-group>
            <el-menu
              default-active="1-4-1"
              class="el-menu-vertical-demo"
              :collapse="isCollapse"
              background-color="#304156"
              text-color="#bfcbd9"
            >
              <router-link to="/IndexRightCont" tag="div">
                <el-menu-item index="1" class="menu-chird">
                  <i class="el-icon-s-cooperation"></i>
                  <span slot="title">商标管理</span>
                </el-menu-item>
              </router-link>

              <router-link to tag="div">
                <el-menu-item index="2" class="menu-chird">
                  <i class="el-icon-s-custom"></i>
                  <span slot="title">关于我们</span>
                </el-menu-item>
              </router-link>

              <router-link to tag="div">
                <el-menu-item index="3" class="menu-chird">
                  <i class="el-icon-s-order"></i>
                  <span slot="title">帮助中心</span>
                </el-menu-item>
              </router-link>

              <router-link to tag="div">
                <el-menu-item index="4" class="menu-chird">
                  <i class="el-icon-phone"></i>
                  <span slot="title">在线咨询</span>
                </el-menu-item>
              </router-link>

              <router-link to tag="div" >
                <el-menu-item index="5" class="menu-chird" @click="dropout">
                  <i class="el-icon-switch-button"></i>
                  <span slot="title" >退出登录</span>
                </el-menu-item>
              </router-link>
            </el-menu>
          </div>
        </el-col>
        <el-col :span="widthNum2" class="index-right">
          <div class="grid-content bg-purple-light">
            <IndexRightTop :isshow="isshow"></IndexRightTop>

            <div class="index-conter">
              <router-view></router-view>
            </div>

            <IndexRightbot></IndexRightbot>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import IndexRight from "@/components/IndexRight.vue";
import IndexRightTop from "@/components/index-component/IndexRightTop";
import IndexRightbot from "@/components/index-component/IndexRightbot";
export default {
  components: {
    IndexRightbot,
    IndexRightTop
  },
  data() {
    return {
      hideHint: "收起",
      widthNum1: 3,
      widthNum2: 21,
      ico: "el-icon-s-fold",
      isCollapse: false,
      isshow: true
    };
  },
  methods: {
    //隐藏 显示左侧导航栏
    HideShow() {
      if (this.isCollapse == false) {
        this.isCollapse = !this.isCollapse;
        this.widthNum1 = 1;
        this.widthNum2 = 23;
        this.ico = "el-icon-s-unfold";
        this.hideHint = "展开";
      } else {
        this.isCollapse = !this.isCollapse;
        this.widthNum1 = 3;
        this.widthNum2 = 21;
        this.ico = "el-icon-s-fold";
        this.hideHint = "收起";
      }
    },
    // 退出登录
    dropout(){
    
      this.$confirm('此操作将退出系统, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          window.localStorage.clear();
          this.$router.push({
            path:"/"
          });
          this.$message({
            type: 'success',
            message: '退出成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '退出失败'
          });          
        });
    }
  },
  //监听路由 改变顶部导航 第一个导航this.isshow = true 第二，三个导航this.isshow = false
  watch: {
    $route(to, from) {
      console.log(this.$route.path);
      if (this.$route.path == "/IndexRightCont") {
        this.isshow = true;
      }
      // if (this.$route.path == "/a") {
      //   this.isshow = false;
      // }
    }
  }
};
</script>

<style lang="less" scope>
.home {
  height: 100vh;
  background-color: #304156;
}
/*首页左边菜单*/
span,
li,
ul,
p,
img {
  padding: 0;
  margin: 0;
}

.index {
    height: 100%;
  ul li {
    list-style: none;
  }
  .index1 {
    height: 100%;
  }

  .index-left {
    height: 100%;
    text-align: center;
    background-color: #304156;
    transition: all 0.5s;
    color: white;
    overflow: hidden;

    .el-menu {
      border: none;
    }
    .menu-chird {
      width: 100%;
    }
    .hide {
      font-size: 20px;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      color: #bfcbd9;
    }
    .index-logo {
      height: 60px;
      line-height: 60px;
      background-color: #926dde;
    }
    .el-tooltip {
      width: 40px;
    }
    .el-menu--collapse{
      width: 100%;
    }
  }
  .index-right {
    overflow: scroll;
    transition: all 0.5s;
    height: 100%;
    background-color: #e4e7ea;
  }
  .el-tooltip{
    padding: 0 !important; 
  }
}
/*顶部盒子*/

/*中间盒子内边距*/
.index-conter {
  margin-top: 60px;
  padding: 15px 10px 10px 10px;
  margin-bottom: 30px;
}
</style>
